<template>
  <div class="orderDetail">
    <ul class="navTables" v-if="!hideNav">
      <li @click="check(index)" v-show="index != 5" :class="{'active': activeIndex==index}" v-for="(item, index) in navArr" :key="index">{{ item.name }}</li>
    </ul>
    <div class="links" v-if="!hideNav">
      <!-- <el-badge :value="logisticNum" class="item">
        <el-button type="primary" plain @click="goWhere('orderLogisticList')">物流查询记录</el-button>
      </el-badge> -->
    </div>
    <noCont v-if="tableData.length == 0"></noCont>
    <div class="cont" v-if="tableData.length > 0">
      <div class="tables" v-for="(item, index) in tableData" :key="index">
        <div class="title">
          <!-- <span>发货任务包裹号：{{ item.packageId }}</span> -->
          <span>第三方订单号：{{ item.thirdOrderNo }}</span>
          <span>{{ item.payTime }}</span>
          <!-- <span>1号货仓</span> -->
          <!-- 包裹状态: 1 待支付 2 已支付待发货 3 已发货 4 待退款 5 已退款 6 驳回退款 7 交易成功 -->
          <span v-if="item.packageStatus==1" class="status">待支付</span>
          <span v-if="item.packageStatus==2" class="status">处理中</span>
          <span v-if="item.packageStatus==3" class="status">仓库已发货</span>
          <span v-if="item.packageStatus==4" class="status">待退款</span>
          <span v-if="item.packageStatus==5" class="status">已退款</span>
          <span v-if="item.packageStatus==6" class="status">驳回退款</span>
          <span v-if="item.packageStatus==7" class="status">交易成功</span>
          <span v-if="item.packageStatus==9" class="status">已补发</span>
          <span v-if="item.packageStatus==10" class="status">订单撤销</span>
        </div>
        <ul class="goodsInfo">
          <li class="detail">
            <div class="item" v-for="(m, i) in item.productDetail ? JSON.parse(item.productDetail) : []" :key="i">
              <img class="goodsImg" @click="lookImg(m.picList ? JSON.parse(m.picList)[0] : noImg)" :src="m.picList ? JSON.parse(m.picList)[0] : noImg" alt="商品标题">
              <div class="info">
                <h6>{{ m.productName }}</h6>
                <p>
                  <span>单价：{{ m.price }}元</span>
                  <span>重量：{{ m.weight }}kg</span>
                  <span>数量：{{ m.num }}</span>
                </p>
              </div>
            </div>
          </li>
          <li class="address">
            <span>收件人：{{ item.receviceName }}
              <strong>{{ item.receiveTelephone }}</strong>
            </span>
            <br />
            <span>{{ item.receiveProvince }}-{{ item.city }}-{{ item.area }}</span>
            <br />
            <span>{{ item.receviceAddress }}</span>
          </li>
          <li class="price">
            <strong>￥{{ item.allMoney }}</strong>
            <br />
            <span>商品 {{ item.productMoney }} 元
              <br> + 运费 {{ item.postMoney }} 元</span>
          </li>
          <li class="operate">
            <div v-if="item.packageStatus >= 3">
              <span>{{ item.logisticsTypeDetail }}</span>
              <br />
              <span>{{ item.logisticsId }}</span>
            </div>
            <!-- <b class="text-button-b">查看物流</b>
            <br /> -->
            <b class="text-button-b" @click="lookDetail(item)">查看包裹详情</b>
            <p v-if="item.rejectFlag == 1">
              驳回原因: {{ item.rejectReason }}
            </p>
          </li>
        </ul>
      </div>
      <el-dialog custom-class="alertGroup" title="商品详情" :modal-append-to-body="false" :visible.sync="goodsInfoObj.show" width="440px" top="10vh">
        <div class="content" style="text-align:center;">
          <!-- <h2>{{ goodsInfoObj.item.logisticsTypeDetail }}-{{ goodsInfoObj.item.logisticsId }}</h2> -->
          <ul class="list">
            <li v-for="(item, index) in goodsInfoObj.item.productDetail ? JSON.parse(goodsInfoObj.item.productDetail) : []" :key="index">
              <img :src="item.picList ? JSON.parse(item.picList)[0] : noImg" alt="商品主图">
              <span>{{ item.productName }}</span>
              <p>
                <span>{{ item.weight }}kg</span>
                <br />
                <span>*{{ item.num }}件</span>
              </p>
            </li>
          </ul>
          <p class="total">
            <span>总重量：
              <i>{{ goodsInfoObj.item.weight }}kg</i>
            </span>
            <span>总金额：
              <i>{{ goodsInfoObj.item.allMoney }}元</i>
            </span>
          </p>
          <div class="backCont" v-if="backObj.isCanBack">
            <el-form ref="backCont" :model="backObj" label-width="80px">
              <el-form-item label="查件原因">
                <el-select v-model="backObj.reason" class="input-n" placeholder="请选择">
                  <el-option style="padding: 0 10px;" label="物流停滞48小时" value="31"></el-option>
                  <el-option style="padding: 0 10px;" label="包裹可能丢失" value="32"></el-option>
                  <el-option style="padding: 0 10px;" label="没有物流信息" value="33"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="截图">
                <imgUpload :imgList="backObj.imgList" max="1"></imgUpload>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="backObj.comment" class="input-n" type="textarea" :rows="2" placeholder="请输入内容">
                </el-input>
              </el-form-item>
            </el-form>
            <h3>* 请务必在物流信息停滞48小时后联系我们</h3>
          </div>
        </div>
        <div class="buttons" v-if="!backObj.isCanBack">
          <b class="button-w" v-if="goodsInfoObj.item.packageStatus == 3 || goodsInfoObj.item.packageStatus == 6 || goodsInfoObj.item.packageStatus == 7" @click="backObj.isCanBack=true">申请查件</b>
          <b class="button-n" @click="goodsInfoObj.show = false">确认</b>
          <h3 v-if="goodsInfoObj.item.packageStatus == 3 || goodsInfoObj.item.packageStatus == 6 || goodsInfoObj.item.packageStatus == 7">* 请务必在物流信息停滞48小时后联系我们</h3>
        </div>
        <div class="buttons" v-if="backObj.isCanBack">
          <b class="button-w" @click="goodsInfoObj.show = false">取消</b>
          <b class="button-n" @click="sureBackTest">确认</b>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import noCont from '../../../base/noCont'
import ImgUpload from '../../../base/imgUpload/index'
import { mapGetters } from 'vuex'
export default {
  name: 'orderDetail',
  components: {
    noCont,
    ImgUpload
  },
  props: {
    tableData: {
      type: Array
    },
    navIndex: {
      type: Number
    },
    hideNav: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      activeIndex: 0,
      navArr: [
        {
          name: '近3日订单',
          query: 'threeOrder',
          status: ''
        },
        {
          name: '处理中',
          query: 'packing',
          status: 2
        },
        {
          name: '仓库已发货',
          query: 'sended',
          status: 3
        },
        {
          name: '待退款',
          query: 'toBack',
          status: 4
        },
        {
          name: '已退款',
          query: 'backed',
          status: 5
        },
        {
          name: '补发订单',
          query: 'sendAgain',
          status: 6
        },
        {
          name: '所有订单',
          query: 'all',
          status: ''
        }
      ],
      goodsInfoObj: {
        show: false,
        packageId: '',
        item: ''
      },
      backObj: {
        reason: '',
        imgList: [],
        comment: '',
        isCanBack: false
      },
      noImg: require('../../../../assets/images/noContainer.svg'),
      logisticNum: 0
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  methods: {
    goWhere (route) {
      this.$router.push({ name: route })
    },
    lookImg (url) {
      this.$lookImg.show(url)
    },
    check (index) {
      this.activeIndex = index
      this.$emit('statusChange', [this.navArr[index], index])
    },
    lookDetail (item) { // 查看包裹详情
      this.goodsInfoObj = {
        show: true,
        packageId: item.packageId,
        item: item
      }
      this.backObj = {
        reason: '',
        imgList: [],
        comment: '',
        isCanBack: false
      }
    },
    sureBackTest () { // 确认申请查件校验
      if (this.backObj.reason === '') {
        this.$message({
          message: '请选择查件原因',
          type: 'warning'
        })
      } else if (this.backObj.imgList.length === 0) {
        this.$message({
          message: '请上传截图',
          type: 'warning'
        })
      } else if (this.backObj.comment === '') {
        this.$message({
          message: '请填写查件备注',
          type: 'warning'
        })
      } else {
        if (parseInt(this.backObj.reason) === 31) {
          let time = new Date(this.goodsInfoObj.item.gmtCreate).getTime()
          let now = new Date().getTime()
          let num = parseInt((now - time) / (1000 * 60 * 60)) // 时间差 小时
          if (num - 0 > 48) {
            this.sureBackPost()
          } else {
            this.$message({
              message: '请48小时后再提交',
              type: 'warning'
            })
          }
        } else {
          this.sureBackPost()
        }
      }
    },
    sureBackPost () { // 确认请求查件请求
      this.$ajax.post('/api/order/operate/addCheckApply', {
        packageId: this.goodsInfoObj.packageId,
        checkReasonType: this.backObj.reason,
        checkComment: this.backObj.comment,
        logisticsPic: this.backObj.imgList
      }).then((data) => {
        if (data.data.code === '200') {
          // this.$message({
          //   message: '已提交查件申请',
          //   type: 'success'
          // })
          this.goodsInfoObj.show = false
          this.$emit('refresh')
          this.$confirm('已提交查件申请, 可至查件/补发查看详细进展', '申请成功', {
            confirmButtonText: '查看已申请',
            cancelButtonText: '取消',
            type: 'success'
          }).then(() => {
            this.$router.push({ name: 'orderLogisticList' })
          })
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    },
    getLogisticNum () { // 获取物流查询数量
      this.$ajax.post('/api/order/search/getCheckApplyNumBySeller', {
        sellerAccountId: this.userInfo.sellerAccountId
      }).then((data) => {
        if (data.data.code === '200') {
          this.logisticNum = data.data.data.num
        } else {
          this.$message({
            message: data.data.message,
            type: 'warning'
          })
        }
      }).catch((err) => {
        console.error(err)
        this.$message({
          message: '生意太火爆了, 请稍后再试',
          type: 'error'
        })
      })
    }
  },
  created () {
    this.getLogisticNum()
  },
  mounted () {
    if (this.navIndex) {
      this.check(this.navIndex)
    } else {
      this.check(0)
    }
    if (this.$route.query.packageStatus) {
      this.check(this.$route.query.packageStatus)
    }
    if (this.hideNav) {
      this.activeIndex = 5
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
@import '../../../../assets/stylus/index'
.orderDetail
  display flex
  flex-direction column
  position relative
  .navTables
    border 1px solid #DDDDDD
    position absolute
    top 0
    left 0
    display flex
    height 42px
    li
      text-align center
      padding 0 20px
      fontSize($fontSize-m, 40px, $fontColor)
      border 1px solid transparent
      cursor pointer
      transition all 0.3s
      &:hover
        background RGBA(255, 4, 55, 0.1)
        border 1px solid $mainColor
        color $mainColor
    .active
      background RGBA(255, 4, 55, 0.1)
      border 1px solid $mainColor
      color $mainColor
  .links
    position absolute
    right 20px
    top 0
    height 42px
    line-height 42px
    cursor pointer
    font-size 16px
    color #2c7dff
  .cont
    flex 1
    margin-top 62px
    .tables
      border 1px solid #E2E2E2
      margin-bottom 12px
      .title
        display flex
        justify-content space-between
        padding 0 20px
        fontSize($fontSize, 48px, $fontColor)
        background #F4F4F5
        .status
          color #FE7605
      .goodsInfo
        display flex
        li
          border-right 1px solid #E2E2E2
          box-sizing border-box
          &:last-child
            border none
        .detail
          display flex
          flex-direction column
          justify-content center
          min-width 380px
          >div
            display flex
            padding 20px
            border-bottom 1px solid #E2E2E2
            &:last-child
              border none
            .goodsImg
              width 80px
              height 80px
              margin-right 15px
              align-self center
            .info
              flex 1
              h6
                fontSize($fontSize, 26px, $fontColor)
                margin-bottom 14px
              p
                display flex
                justify-content space-between
                fontSize($fontSize, 26px, $fontColor)
        .address
          padding 20px
          width 300px
          display flex
          flex-direction column
          justify-content center
          span, strong
            fontSize($fontSize, 26px, $fontColor)
          span
            // white-space nowrap
          strong
            margin-left 10px
        .price
          padding 20px
          text-align center
          display flex
          flex-direction column
          justify-content center
          strong
            fontSize($h2Size, 28px, $mainColor)
        .operate
          padding 20px
          flex 1
          text-align center
          display flex
          flex-direction column
          justify-content center
          div
            line-height 30px
          p
            margin-top 20px
.alertGroup
  padding 40px
  .content
    h2
      fontSize($fontSize-l, 1, $fontColor)
    .list
      border-bottom 1px solid #EBEEF5
      max-height 350px
      overflow auto
      margin-top 20px
      li
        margin-bottom 20px
        display flex
        justify-content space-between
        fontSize($fontSize, 20px, $fontColor)
        img
          width 60px
          height 60px
        span
          // flex 1
          text-align left
        p
          width 40px
          display flex
          flex-direction column
          justify-content space-between
    .total
      display flex
      margin 20px 10px
      justify-content space-between
      fontSize($fontSize, 1, $fontColor)
      i
        color $mainColor
  .backCont
    text-align left
    h3
      font-size 14px
      color $mainColor
      text-align center
  .buttons
    text-align center
    margin-top 40px
    b
      padding 0 20px
    h3
      margin-top 20px
      font-size 14px
      color $fontColor-gray
</style>
